<template>
  <video-player
    class="video-player-box vjs-default-skin vjs-big-play-centered"
    ref="playerRef"
    :options="playerOptions"
    :playsinline="true"
    customEventName="customstatechangedeventname"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @waiting="onPlayerWaiting($event)"
    @playing="onPlayerPlaying($event)"
    @loadeddata="onPlayerLoadeddata($event)"
    @timeupdate="onPlayerTimeupdate($event)"
    @canplay="onPlayerCanplay($event)"
    @canplaythrough="onPlayerCanplaythrough($event)"
    @statechanged="playerStateChanged($event)"
    @ready="playerReadied">
  </video-player>
</template>

<script>
  import {ref, watch, computed} from "vue"
  import "video.js/dist/video-js.css"
  import videoPlayer from "vue-video-player"
  import zhCNJson from "video.js/dist/lang/zh-CN.json";
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import "some-videojs-plugin"
  export default {
    components: {
      VideoPlayer: videoPlayer
    },
    props: {
      src: {
        type: String,
        required: true
      },
      playerEnded: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerPause: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerPlay: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerWaiting: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerPlaying: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerLoadeddata: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerTimeupdate: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerCanplay: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerCanplaythrough: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      },
      playerStateChangedCallback: {
        type: Function,
        default: (state) => {
          console.log(state)
        }
      },
      playerReadiedCallback: {
        type: Function,
        default: (player) => {
          console.log(player)
        }
      }
    },
    setup(props) {
      const playerOptions = ref({
        // 如果true, 浏览器准备好时开始播放。
        autoplay: true,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 语言选择
        language: "zh-CN",
        // 引入语言
        languages: {
          "zh-CN": zhCNJson
        },
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: "16:9",
        // 播放速度
        playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0],
        // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: "auto",
        // 视频类型与播放地址
        sources: [{
          type: "video/mp4",
          src: props.src
        }],
        // 你的封面地址
        poster: "",
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        // 全屏按钮
        fullscreenToggle: true,
      })
      watch(() => props.src, (val) => {
        playerOptions.value.sources[0].src = val;
      })
      const onPlayerPlay = function(player) {
        props.playerPlay && props.playerPlay(player);
      }
      const onPlayerPause = function(player) {
        props.playerPause && props.playerPause(player);
      }
      const onPlayerEnded = function(player) {
        props.playerEnded && props.playerEnded(player);
      }
      const onPlayerWaiting = function(player) {
        props.playerWaiting && props.playerWaiting(player);
      }
      const onPlayerPlaying = function(player) {
        props.playerPlaying && props.playerPlaying(player);
      }
      const onPlayerLoadeddata = function(player) {
        props.playerLoadeddata && props.playerLoadeddata(player);
      }
      const onPlayerTimeupdate = function(player) {
        props.playerTimeupdate && props.playerTimeupdate(player);
      }
      const onPlayerCanplay = function(player) {
        props.playerCanplay && props.playerCanplay(player);
      }
      const onPlayerCanplaythrough = function(player) {
        props.playerCanplaythrough && props.playerCanplaythrough(player);
      }
      // or listen state event
      const playerStateChanged = function(playerCurrentState) {
        props.playerStateChangedCallback && props.playerStateChangedCallback(playerCurrentState);
        // console.log("player current update state", playerCurrentState)
      }
      // player is ready
      const playerReadied = function(player) {
        console.log("the player is readied", player)
        props.playerReadiedCallback && props.playerReadiedCallback(player);
        // you can use it to do something...
        // player.[methods]
      }
      const playerRef = ref(null);
      const player = computed(() => {
        return playerRef.value.player
      })
      return {
        playerOptions,
        playerRef,
        player,
        onPlayerPlay,
        onPlayerPause,
        onPlayerEnded,
        onPlayerWaiting,
        onPlayerPlaying,
        onPlayerLoadeddata,
        onPlayerTimeupdate,
        onPlayerCanplay,
        onPlayerCanplaythrough,
        playerStateChanged,
        playerReadied
      }
    }
  }
</script>

<style lang="scss">
  .video-js {

  }
</style>
